﻿@{
    ViewBag.Title = "jqGrid in ASP.NET MVC - Employees [Form Editing]";

    var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<jqGrid.DungDepTrai.Models.EmployeeViewModel>("employees",
        dataType: Lib.Web.Mvc.JQuery.JqGrid.JqGridDataTypes.Json,
        methodType: Lib.Web.Mvc.JQuery.JqGrid.JqGridMethodTypes.Post,
        pager: true,
        rowsNumber: 10,
        sortingName: "LastName",
        sortingOrder: Lib.Web.Mvc.JQuery.JqGrid.JqGridSortingOrders.Asc,
        url: Url.Action("FindEmployees"),
        width: 1077,
        viewRecords: true
    ).Navigator(new Lib.Web.Mvc.JQuery.JqGrid.JqGridNavigatorOptions() { Search = false, View = false },
        editActionOptions: new Lib.Web.Mvc.JQuery.JqGrid.JqGridNavigatorActionOptions() { Url = Url.Action("UpdateEmployee"), OnInitializeForm = "$.onInitializeForm", OnAfterShowForm = "$.onAfterShowForm", OnClose = "$.onClose" },
        addActionOptions: new Lib.Web.Mvc.JQuery.JqGrid.JqGridNavigatorActionOptions() { Url = Url.Action("InsertEmployee"), OnInitializeForm = "$.onInitializeForm", OnAfterShowForm = "$.onAfterShowForm", OnClose = "$.onClose" },
        deleteActionOptions: new Lib.Web.Mvc.JQuery.JqGrid.JqGridNavigatorActionOptions() { Url = Url.Action("DeleteEmployee") }
    );
}
@section Css {
    <style type="text/css">
        .ui-jqgrid tr.jqgrow td 
        {
            vertical-align: top !important;
            white-space: normal !important;
        }
        .EditTable tr.FormData td.CaptionTD
        {
            vertical-align: top !important;
        }
    </style>
}

@grid.GetHtml()

@section JavaScript {
    <script src="@Url.Content("~/Scripts/jquery.iframe-post-form.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/TinyMCE/tiny_mce.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/TinyMCE/jquery.tinymce.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            @grid.GetJavaScript()
        });

        //Every photo have constant URL, this formatter will make them refresh at every reload <-- only for presentation purposes
        $.photoFormatter = function(cellvalue, options, rowObject) {
            return "<img style='width:25px' src='" + cellvalue + "&rand=" + (Math.random() * 10000000) + "' />";
        };

        //Always unformat photo as empty value
        $.photoUnFormatter = function(cellvalue, options, cellobject) {
            return '';
        };

        //WARNING: This will completely replace build in jqGrid post behavior
        $.onInitializeForm = function(formSelector) {
            //Set required form attributes and add AJAX IFrame Upload plugin
            $(formSelector).attr('enctype', 'multipart/form-data')
                           .attr('method', 'POST')
                           .removeAttr('onsubmit')
                           .iframePostForm({
                                complete: function(response) {
                                    if(response != 'success') {
	                                    $('#FormError>td', formSelector).html(response);
	                                    $('#FormError', formSelector).show();
                                    } else {
                                        var id = $('#id_g', formSelector).val();
                                        $('#employees').trigger('reloadGrid');
                                        setTimeout(function(){
                                            $('#employees').jqGrid('setSelection', id);
                                        }, 1000);
                                    }
                                    $('#iframe_submit').removeClass('ui-state-active');
                                }
                           });
            //Additional inputs for keys which jqGrid adds to request
            $('#id_g', formSelector).after($('<input />').attr('id', 'iframe_id').attr('type', 'text').attr('name', 'id'));
            $('#id_g', formSelector).after($('<input />').attr('id', 'iframe_oper').attr('type', 'text').attr('name', 'oper'));
            //Change the id, so jqGrid will not attach its event
            $('#sData').attr('id', 'iframe_submit').click(function(e) {
                $('#FormError', formSelector).hide();
                var id = $('#id_g', formSelector).val();
                $('#iframe_id', formSelector).val(id);
                $('#iframe_oper', formSelector).val((id == '_empty') ? 'add' : 'edit');
                $(formSelector).attr('action', (id == '_empty') ? '@Url.Action("InsertEmployee")' : '@Url.Action("UpdateEmployee")')
                $('#iframe_submit').addClass('ui-state-active');
                $(formSelector).submit();
                return false;
			});
        };

        //TinyMCE can't be attached to element which is not visible
        $.onAfterShowForm = function(formSelector) {
            //It needs to be recreated after every form show
            $('textarea', formSelector).attr('cols', '50').attr('rows', '15').tinymce({
                theme : 'advanced',
                theme_advanced_toolbar_location : 'top'
            });
        };

        $.onClose = function(formSelector) {
            //And destroyed after every form close
            $('textarea', formSelector).tinymce().remove();
        };
    </script>
}